<template>
  <div class="flip-clock">
    <flippers ref="flipperHour1" />
    <flippers ref="flipperHour2" />
    <em>:</em>
    <flippers ref="flipperMinute1" />
    <flippers ref="flipperMinute2" />
    <em>:</em>
    <flippers ref="flipperSecond1" />
    <flippers ref="flipperSecond2" />
  </div>
</template>

<script lang="ts">
import {
  ref,
  onBeforeMount,
  getCurrentInstance,
  nextTick,
  onUnmounted
} from "vue";
import flippers from "./Filpper";
export default {
  name: "Flop",
  components: {
    flippers
  },
  setup() {
    let vm: any;
    let timer = ref(null);
    let flipObjs = ref([]);

    // 初始化数字
    const init = () => {
      let now = new Date();
      let nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
      for (let i = 0; i < flipObjs.value.length; i++) {
        flipObjs.value[i].setFront(nowTimeStr[i]);
      }
    };

    // 开始计时
    const run = () => {
      timer.value = setInterval(() => {
        // 获取当前时间
        let now = new Date();
        let nowTimeStr = formatDate(new Date(now.getTime() - 1000), "hhiiss");
        let nextTimeStr = formatDate(now, "hhiiss");
        for (let i = 0; i < flipObjs.value.length; i++) {
          if (nowTimeStr[i] === nextTimeStr[i]) {
            continue;
          }
          flipObjs.value[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
        }
      }, 1000);
    };

    // 正则格式化日期
    const formatDate = (date: Date, dateFormat: string) => {
      /* 单独格式化年份，根据y的字符数量输出年份
     * 例如：yyyy => 2019
            yy => 19
            y => 9
     */
      if (/(y+)/.test(dateFormat)) {
        dateFormat = dateFormat.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      // 格式化月、日、时、分、秒
      let o = {
        "m+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "i+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(dateFormat)) {
          // 取出对应的值
          let str = o[k] + "";
          /* 根据设置的格式，输出对应的字符
           * 例如: 早上8时，hh => 08，h => 8
           * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
           * 例如: 下午15时，hh => 15, h => 15
           */
          dateFormat = dateFormat.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : padLeftZero(str)
          );
        }
      }
      return dateFormat;
    };

    // 日期时间补零
    const padLeftZero = (str: string | any[]) => {
      return ("00" + str).substr(str.length);
    };

    onBeforeMount(() => {
      vm = getCurrentInstance(); //获取组件实例
      nextTick(() => {
        flipObjs.value = [
          vm.refs.flipperHour1,
          vm.refs.flipperHour2,
          vm.refs.flipperMinute1,
          vm.refs.flipperMinute2,
          vm.refs.flipperSecond1,
          vm.refs.flipperSecond2
        ];

        init();
        run();
      });
    });

    onUnmounted(() => {
      if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
      }
    });

    return {
      timer,
      flipObjs,
      init,
      run,
      formatDate,
      padLeftZero
    };
  }
};
</script>

<style>
.flip-clock .m-flipper {
  margin: 0 3px;
}
.flip-clock em {
  display: inline-block;
  line-height: 102px;
  font-size: 66px;
  font-style: normal;
  vertical-align: top;
}
</style>
